<template>
    <div class="cny">
      <div class="list">
        <ul>
          <li><p class="p1">{{$t('can use')}}</p></li>
          <li><p class="p2">{{canuse_cny}}</p></li>
        </ul>
        <ul>
          <li><p class="p1">{{$t('freeze use')}}</p></li>
          <li><p class="p2">{{freeze_cny}}</p></li>
        </ul>
      </div>
    </div>
</template>

<i18n>
  title.CNY:
    en: CNY
    zh-CN: CNY
  can use:
    en: Userful Coin
    zh-CN: 可用币数
  freeze use:
    en: Freezen Coin
    zh-CN: 冻结币数
</i18n>

<script>
  export default {
    name: 'CNY',
    data () {
      return {
        show: false,
        canuse_cny: '',
        freeze_cny: ''
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        this.getInfo()
      },
      getInfo () {
        let vue = this
        let url = 'api/usercenter/havecny'
        vue.post({
          url: url,
          params: {
            token: localStorage.token
          },
          success: function (data) {
            console.log(data)
            vue.freeze_cny = data.data.freeze_cny
            vue.canuse_cny = data.data.canuse_cny
          }
        })
      }
    }
  }
</script>

<style scoped>
.list ul{
  display: flex;
  border: 1px solid #fafafa;
  list-style: none;
  height: 0.9rem;
}
.list ul li{
  flex-grow: 1;
  text-align: center;
}
.list ul li p{
  height: 0.9rem;
  line-height: 0.9rem;
}
.list ul li .p1{
  color: #666666;
  font-size: .28rem;
  text-align: left;
  padding-left: 0.4rem;
}
.list ul li .p2{
  color: #333333;
  font-size: .4rem;
  text-align: right;
  padding-right: 0.4rem;
}
</style>
